<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<style>
            .form-item{margin-bottom: 12px;}
            .daterangepicker{z-index: 10000;}
            #activitiesEditForm .form-item>label {min-width: 72px; display: inline-block; text-align: right;}
		</style>
		<div class="super-theme-example">
			<div class="options-toolbar">	
				<form id="activitiesDatagridQueryParams">
					<select class="easyui-combobox shopIdCombo_activities" name="shopId" style="width:150px;"></select>
                    <select class="easyui-combobox" name="status" style="width:150px;">
                        <option value="">全部</option>
                        <option value="0">已创建</option>
                        <option value="10">运行中</option>
                        <option value="-10">已下线</option>
                    </select>
					<input class="easyui-textbox" name="promotionName" data-options="width:150,prompt:'活动名称...'">
					<a href="javascript:void(0)" class="easyui-linkbutton primary" data-options="iconCls:'fa fa-search'" onclick="app_activities.methods.queryDatagrid();">查询</a>
				</form>
				<div class="top-options">
					<a href="javascript:void(0)" class="easyui-linkbutton success" data-options="iconCls:'fa fa-plus'" onclick="app_activities.methods.createactivities();">新建</a>
				</div>
			</div>
			<table id="activities-datagrid"></table>
			<div id="activitiesEditWin" class="easyui-window" title="模板" style="width:360px;" data-options="closed:true,modal:true,minimizable:false,maximizable:false,tools:[{iconCls:'fa fa-save',handler:function(){app_activities.methods.saveactivities();}}]">
				<div class="super-theme-example" style="margin: 0px auto;">
					<form id="activitiesEditForm">
                        <input name="id" type="hidden" />
                        <div class="form-item">
							<label for="" class="label-top">商城：</label>
					        <select id="" class="shopIdCombo_activities easyui-combobox" name="shopId" style="width:250px;"></select>
                        </div>
                        <div class="form-item">
							<label for="" class="label-top">活动名称：</label>
							<input name="promotionName" class="easyui-textbox" prompt="名称..." style="width: 250px;">
                        </div>
                        <div class="form-item">
                            <label for="" class="label-top">满减规则：</label>
                            <div style="display: inline-block; width: 250px;">
                               	<span>满 </span><input name="fullValue" class="easyui-textbox" prompt="满减条件..." style="width: 100px;">
                                <span>减 </span><input name="reductionValue" class="easyui-textbox" prompt="满减额度..." style="width: 100px;">
                            </div>
                        </div>
                        <div class="form-item">
                            <label for="" class="label-top">活动期限：</label>
                            <input id="activities-datepicker" class="datepicker-input"  style="width: 240px"/>
                        </div>
                        <div class="form-item">
							<label for="" class="label-top">备注：</label>
							<input name="comments" class="easyui-textbox" prompt="名称..." style="width: 250px;">
                        </div>
					</form>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var app_activities = {
				datas : {} , 
				methods : {
                    initTimeSelect: function(){
                    	var customerDaterangepickerOptions = {
							startDate: moment().startOf('day'),
							endDate: moment().endOf('day').add(2, 'days'),
							locale: {
								format: 'YYYY-MM-DD HH:mm:ss',
								applyLabel: '确定',
								cancelLabel: '取消',
								customRangeLabel: '自定义'
							},
							ranges: {
								'今天': [moment().startOf('day'), moment().endOf('day')],
								'未来3天': [moment().startOf('day').add(1, 'days'), moment().endOf('day').add(3, 'days')],
								'未来7天': [moment().startOf('day').add(1, 'days'), moment().endOf('day').add(7, 'days')],
								'未来14天': [moment().startOf('day').add(1, 'days'), moment().endOf('day').add(14, 'days')],
								'未来30天': [moment().startOf('day').add(1, 'days'), moment().endOf('day').add(30, 'days')]
							}
                    	} ;
						$('#activities-datepicker').daterangepicker(customerDaterangepickerOptions);
					},
                    initShopCombo: function(){
						$('.shopIdCombo_activities').combobox({
						    url: commonConfig.shopUrlPrefix() + '/shop/combobox',
						    valueField: 'id',
						    textField: 'text'
						});
					},
					initDatagrid : function(){
						var rowData = $('#activitiesDatagridQueryParams').serializeJson()
						$('#activities-datagrid').datagrid({
							height: $(document).height() - 200,
							url: commonConfig.shopUrlPrefix() + '/admin/promotion/every-f-r/list',
						    columns:[[
								{field:'shopName',title:'商城',width:100,align:'center'},
								{field:'promotionName',title:'活动名称',width:100,align:'center'},
								{field:'fullValue',title:'满减规则',width:120,align:'center',formatter: function(value,row,index){
                                    return '满 ' + value + ' 减 ' + row.reductionValue;
                                }},
                                {field:'begainTime',title:'活动期限',width:120,align:'center',formatter: function(value,row,index){
                                    return value + ' ~ ' + row.endTime;
                                }},
                                {field:'promotionCode',title:'活动编码',width:100,align:'center'},
                                {field:'comments',title:'备注',width:120,align:'center'},
                                {field:'statusName',title:'状态',width:120,align:'center',formatter: function(value,row,index){
                                    var statusClass = ''
                                    switch(row.status){
                                        case 0: statusClass = 'info';break;
                                        case 10: statusClass = 'success';break;
                                        case -10: statusClass = 'error';break;
                                    }
                                    return '<span class="tag '+statusClass+'">'+value+'</span>';
                                }},
                                {field:'createdBy',title:'创建者',width:100,align:'center'},
								{field:'options',title:'操作',width:150,align:'center',formatter: function(value,row,index){
                                    return	(row.status != 10 ? '<button class="row-btn info" onclick="app_activities.methods.editactivities('+index+');">编辑</button>' : '') +
                                            '<button class="row-btn '+(row.status == 10 ? 'error' : 'success')+'" onclick="app_activities.methods.setActivitiesState(' + row.id + ', ' + row.status + ');">'+(row.status == 10 ? '下' : '上')+'线</button>'+
                                            (row.status != 10 ? '<button class="row-btn primary" onclick="app_activities.methods.deleteactivities('+row.id+');">删除</button>' : '');
								}}
						    ]]
						});
                    },
                    setActivitiesState: function(activitiesId, status){
                        $.messager.confirm('提示', '确定'+(status == 10 ? '下线' : '上线')+'?', function(r){
							if (r){
								requestServer(commonConfig.shopUrlPrefix() + '/admin/promotion/every-f-r/' + activitiesId + '/' + (status == 10 ? 'down' : 'up'), 'PUT').then((response) => {
									if (response.code == 1) {
										showMessage('<i class="fa fa-info-circle"></i>&nbsp; 操作成功...');
										app_activities.methods.queryDatagrid();
									}else {
										$.messager.alert('提示',response.message,'error');
									}
								}).catch((error) => {
									console.log(error)
								});
							}
						});
                    },
					openCreateactivitiesWindow: function(){
						$('#activitiesEditWin').window('open');	
						$('#activitiesEditForm').form('clear');
					},
					deleteactivities: function(activitiesId){
						$.messager.confirm('提示', '确定删除?', function(r){
							if (r){
								requestServer(commonConfig.shopUrlPrefix() + '/admin/promotion/every-f-r/' + activitiesId, 'DELETE').then((response) => {
									if (response.code == 1) {
										showMessage('<i class="fa fa-info-circle"></i>&nbsp; 删除成功...');
										app_activities.methods.queryDatagrid();
									}else {
										$.messager.alert('提示',response.message,'error');
									}
								}).catch((error) => {
									console.log(error)
								});
							}
						});
					},
					createactivities: function(){
						app_activities.methods.openCreateactivitiesWindow();
					},
					editactivities: function(index){
						// 在这里初始化数据
						app_activities.methods.openCreateactivitiesWindow();
						var rowData = $('#activities-datagrid').datagrid('getRows')[index] ; 
						$('#activitiesEditForm').form('load' , rowData);
                        $('#activities-datepicker').data('daterangepicker').setStartDate(rowData.begainTime);
                        $('#activities-datepicker').data('daterangepicker').setEndDate(rowData.endTime);
					},
					saveactivities: function(){
                        var rowData = $('#activitiesEditForm').serializeJson()
                        console.log(rowData)
                        rowData.begainTime = $('#activities-datepicker').val().substring(0, 19)
                        rowData.endTime = $('#activities-datepicker').val().substring(22)
						requestBodyServer(commonConfig.shopUrlPrefix() + '/admin/promotion/every-f-r', 'POST', rowData).then((response) => {
							if (response.code == 1) {
								showMessage('<i class="fa fa-info-circle"></i>&nbsp; 成功...');
								$('#activitiesEditWin').window('close');
								app_activities.methods.queryDatagrid();
							}else {
								$.messager.alert('提示',response.message,'error');
							}
						}).catch((error) => {
							console.log(error)
						});
					},
					initDatagridQueryParams: function(){
						var params = $('#activitiesDatagridQueryParams').serializeArray();
						var queryParams = {};
						$.each(params , function(index , param){
						     queryParams[param.name] = param.value;
						})
						return queryParams;
					},
					queryDatagrid: function(){
						$('#activities-datagrid').datagrid('load',app_activities.methods.initDatagridQueryParams());
					},
				},
				init : function(){
                    app_activities.methods.initTimeSelect();
					app_activities.methods.initShopCombo();
					app_activities.methods.initDatagrid();
				}
			}
			app_activities.init();
		</script>
	</body>
</html>
